<template>
  <div class="order-list-wrap">
    <div
      class="order-list-item-wrap"
      v-for="item in orders.slice().reverse()"
      :key="item.pay_id"
    >
      <div class="order-list-title-wrap">
        <div class="order-num">订单号 : {{ item.pay_id }}</div>
        <div class="order-list-status-txt">
          <div class="status-nopay" v-if="item.status == 'NOTPAY'">未支付</div>
          <div class="status-payed" v-if="item.status == 'SUCCESS'">已支付</div>
          <div class="" v-if="item.status == 'REFUNDING'">退款中</div>
          <div class="" v-if="item.status == 'REFUNDED'">已退款</div>
        </div>
      </div>

      <div class="order-wrap">
        <div class="order-wrap-left">
          <img src="https://ya30images.hbwlife.com/wxmp/default-pic.png" />
        </div>
        <div class="order-content">
          <div class="order-name">
            {{ item.pay_for == 'TICKET' ? '购买泳票' : '' }}
          </div>

          <div class="order-time">时间：{{ item.created_time || '' }}</div>
          <div class="order-price">
            金额：￥{{ item.pay_amount / 100 || 0 }}
          </div>
        </div>
      </div>

      <div class="order-list-foot-wrap">
        <div class="order-list-price-wrap">
          <div class="order-list-price-item">
            <div
              class="cancel-btn"
              v-show="item.status == 'SUCCESS'"
              @click="fnPayback(item)"
            >
              申请退款
            </div>
            <div
              class="cancel-btn"
              v-show="item.status == 'NOTPAY'"
              @click="goTitckDetail(item)"
            >
              立即支付
            </div>
            <!-- <text class="cancel-btn" @click="goOrderDetail(item)"
              >查看详情</text> -->
            <div class="cancel-btn again-pay" @click="goOrderTitckList(item)">
              再次购买
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="orders.length === 0" class="noData">
      <img src="./../../assets/img/noData.png" alt="" />
      <span>暂无订单</span>
    </div>
  </div>
</template>

<script setup>
import wx from 'weixin-js-sdk'
import { onMounted, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import {
  showSuccessToast,
  showFailToast,
  showToast,
  showConfirmDialog,
} from 'vant'
import { postData } from '@/request/request'

let route = useRoute()
let query = route.query
localStorage.clear()
localStorage.setItem('user_id', query.user_id || '')
localStorage.setItem('access_token', query.access_token || '')
localStorage.setItem('open_id', query.open_id || '')
localStorage.setItem('currentPath', query.currentPath || '')

const orders = ref([])
const page = ref(0)
// const triggeredAll = ref(true)
// const triggered = ref(true)
// const modalShow = ref(false)
// const qrcodeText = ref('二维码')

onMounted(() => {
  initList()
})

const initList = () => {
  postData('/user/pay/list', {
    page: page.value,
  })
    .then((res) => {
      orders.value = res?.datas?.orders || []
    })
    .catch((err) => {
      console.log(err)
    })
}

//申请退款
const fnPayback = (data) => {
  showConfirmDialog({
    title: '退款',
    message: '确定申请退款？',
    confirmButtonText: '确定',
    cancelButtonText:'再想想',
    confirmButtonColor:'#d5ad57',
    cancelButtonColor:'#676a6d',
    
  })
    .then(() => {
      postData('/user/payback/apply', {
        pay_id: data.pay_id,
      })
        .then((res) => {
          showSuccessToast('已申请')
          initList()
        })
        .catch((err) => {
          console.log(err)
        })
    })
    .catch(() => {
      // on cancel
      console.log('已取消')
    })
}

//未支付去详情页
const goTitckDetail = () => {
  wx &&
    wx.miniProgram.switchTab({
      url: '/pages/site/index',
    })
}

//该页面接口返回加上template_id后，就可以跳转到pagesB/titckDetail/titckDetail
const goOrderTitckList = () => {
  wx &&
    wx.miniProgram.switchTab({
      url: '/pages/site/index',
    })
}

watch(
  () => route.fullPath,
  () => {
    initList()
  }
)
</script>

<style scoped>
.noData {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  color: #333333;
  padding-top: 0.6rem;
}
.noData img {
  width: 0.6rem;
  height: 0.6rem;
}
.noData span {
  margin-top: 0.2rem;
  font-size: 0.14rem;
  color: #969698;
}
.order-list-wrap {
  width: 100%;
  overflow-x: hidden;
  min-height: 100vh;
  padding-bottom: 0.5rem;
  position: relative;
  box-sizing: border-box;
  background: #f7f7f8;
  color: #333;
  font-size: 0.16rem;
}
.order-list-item-wrap {
  width: 100%;
  height: auto;
  max-height: 2.165rem;
  box-sizing: border-box;
  margin-top: 0.05rem;
  background-color: #fff;
  border-radius: 0.05rem;
  font-size: 0.16rem;
}
.order-list-title-wrap {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  padding: 0.125rem;
  color: #888787;
  border-bottom: 1px solid #efefef;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.order-num {
  font-size: 0.14rem;
}
.order-list-status-txt {
  color: #d1aa55;
}
.status-nopay {
  color: #e23232;
}
.status-payed {
  color: #676a6d;
  font-size: 0.16rem;
}
.order-wrap {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 0.15rem;
  box-sizing: border-box;
  border-bottom: 1px solid #efefef;
}
.order-wrap-left {
  width: 0.5rem;
  height: 0.5rem;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}
.order-wrap-left img {
  width: 100%;
  height: 100%;
  border-radius: 0.05rem;
}
.order-content {
  flex: 1;
  padding-left: 0.2rem;
  padding-right: 0;
  display: flex;
  flex-flow: column;
  justify-content: space-around;
  align-items: flex-start;
}
.order-name {
  color: rgba(26, 27, 29, 1);
  font-weight: 500;
}
.order-time {
  margin-top: 0.1rem;
  color: #676a6d;
}
.order-price {
  margin-top: 0.1rem;
  color: #d1aa55;
}
.order-list-foot-wrap {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  padding: 0.125rem;
}
.order-list-price-wrap {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  box-sizing: border-box;
}
.order-list-price-item:first-child {
}
.order-list-price-item {
}
.cancel-btn {
  width: auto;
  height: auto;
  padding: 0.05rem 0.075rem;
  border-radius: 0.1rem;
  font-size: 0.13rem;
  color: #414141;
  margin-left: 0.14rem;
  background: #ccc;
  color: #6d6a6a;
  background: #eeefee;
}
.again-pay {
  background: #fbeed5;
  color: #e2a118;
}
.order-list-price-num-all {
  color: #010101;
}
.order-list-price-label {
  margin-right: 0.1rem;
}
.order-list-btn-wrap {
  width: 100%;
  height: auto;
  margin-top: 0.065rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.order-list-btn-text {
  justify-content: flex-end;
}
.order-list-modal {
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.h-button {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.13rem;
  color: #fff;
  border-radius: 0.14rem;
  width: 0.785rem;
  height: 0.275rem;
}
.h-button-default {
  background-color: #efefef;
  color: #010101;
}
.h-button-primary {
  background-image: linear-gradient(to right, #d5ad57, #d69b1d);
  color: #fff;
}
.h-button-text {
  background-color: rgba(0, 0, 0, 0);
  color: #f34040;
}
.h-button-disabled {
  background-color: #cbcbcb;
  color: #888787;
  background-image: linear-gradient(to right, #cbcbcb, #cbcbcb);
}

.order-list-price-item {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style>
